<template>
  <div class="pay-container">
    <el-row :gutter="20">
      <el-col
        :lg="{ span: 14, offset: 5 }"
        :md="{ span: 20, offset: 2 }"
        :sm="{ span: 20, offset: 2 }"
        :xl="{ span: 12, offset: 6 }"
        :xs="24"
      >
        <div v-if="orderInfo" class="order-info">
          <h2>订单信息</h2>
          <el-descriptions border :column="1">
            <el-descriptions-item label="订单号">{{ orderInfo.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="商品名称">{{ orderInfo.productName }}</el-descriptions-item>
            <el-descriptions-item label="供应商">{{ orderInfo.supplierName }}</el-descriptions-item>
            <el-descriptions-item label="数量">{{ orderInfo.quantity }}</el-descriptions-item>
            <el-descriptions-item label="入库仓库">{{ orderInfo.warehouseLabel }}</el-descriptions-item>
            <el-descriptions-item label="支付金额">{{ orderInfo.price }}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{ payMethodText }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <el-steps :active="active" align-center class="steps" :space="200">
          <el-step title="填写转账信息" />
          <el-step title="确认转账信息" />
          <el-step title="完成" />
        </el-steps>
        <step1 v-if="active === 1" @change-step="handleSetStep" />
        <step2 v-if="active === 2" :info-data="form" @change-step="handleSetStep" />
        <step3 v-if="active === 3" :info-data="form" @change-step="handleSetStep" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Step1 from './components/Step1'
  import Step2 from './components/Step2'
  import Step3 from './components/Step3'

  export default {
    name: 'Pay',
    components: { Step1, Step2, Step3 },
    data() {
      return {
        active: 1,
        form: {},
        orderInfo: null
      }
    },
    computed: {
      payMethodText() {
        if (!this.orderInfo) return ''
        const methodMap = {
          'alipay': '支付宝',
          'wechat': '微信支付',
          'bank': '银行转账'
        }
        return methodMap[this.orderInfo.payMethod] || '未知支付方式'
      }
    },
    created() {
      // 从localStorage获取订单信息
      const paymentInfo = localStorage.getItem('currentPaymentInfo')
      if (paymentInfo) {
        this.orderInfo = JSON.parse(paymentInfo)
        // 预填充表单数据
        this.form = {
          payAccount: 'XXXXXXXXXXXXXXXX',
          gatheringAccount: 'payment@supplier.com',
          gatheringName: this.orderInfo.supplierName,
          price: this.orderInfo.price
        }
      }
    },
    methods: {
      handleSetStep(active, form) {
        this.active = active
        if (form) this.form = Object.assign(this.form, form)

        // 如果完成支付，更新订单状态
        if (active === 3) {
          this.updateOrderStatus()
        }
      },
      updateOrderStatus() {
        // 从localStorage获取订单数据
        const purchaseData = JSON.parse(localStorage.getItem('purchaseTableData') || '[]')
        if (this.orderInfo && this.orderInfo.orderNo) {
          const index = purchaseData.findIndex(item => item.orderNo === this.orderInfo.orderNo)
          if (index !== -1) {
            purchaseData[index].status = '已完成'
            localStorage.setItem('purchaseTableData', JSON.stringify(purchaseData))
          }
        }
      }
    },
  }
</script>
<style lang="scss" scoped>
  .pay-container {
    .steps {
      justify-content: center;
      margin-bottom: 20px;
    }

    .order-info {
      margin-bottom: 30px;
      padding: 20px;
      background-color: #f8f8f8;
      border-radius: 4px;

      h2 {
        margin-top: 0;
        margin-bottom: 20px;
        text-align: center;
        color: #409EFF;
      }
    }
  }
</style>
